 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk.css?v=1.0.1" rel="stylesheet">
    <link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bkclouds.cc/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="https://magicbox.bkclouds.cc/static_api/analysis.js"></script>
  <script src="${STATIC_URL}/js/nanobar.min.js"></script>
<link href="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk.css?v=1.0.1" rel="stylesheet">


    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-container clearfix">
            <nav role="navigation" class="navbar navbar-default king-horizontal-nav3  king-horizontal-success   f14">
                <div class="nav-container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bk-example-navbar-collapse-3">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:;">
                            <img src="https://magicbox.bkclouds.cc/static_api/v3/bk/images/logo.png" alt="" class="logo"> </a>
                    </div>
                    <div class="collapse navbar-collapse navbar-responsive-collapse" id="bk-example-navbar-collapse-3">
                        <ul class="nav navbar-nav ">
                            <!--<li :class="{'bk-cur':item.active}"  v-for="item in renderData.items">-->
                            <li class="bk-cur"> <a href="javascript:void(0);">首页<span></span></a> </li>
                        </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="javascript:;">
                                    <img src="http://blog.sctux.com/wp-content/themes/simple/images/face.png" class="avatar">
                                    <span> OutMan </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="container-fluid mb0 ">
                <div class="row">
                    <div class="col-md-2">
                        <nav style="height:100%;" class="f14">
                            <div class="king-vertical-nav4">
                                <div class="sidebar-inner">
                                    <ul class="navi">
                                        <li class="has_submenu current open c-open active">
                                            <a href="javascript:void(0);"> <i class="fa fa-gear ">                        </i>
                                                <span>首页</span>
                                                <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                                            </a>

                                        </li>
                                        <li class="has_submenu current open c-open">
                                            <a href="javascript:void(0);"> <i class="fa fa-wrench ">                        </i>
                                                <span>常用小工具</span>
                                                <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                                            </a>
                                            <ul class="sub-menu" style="display: block;">
                                                <li><a href="${SITE_URL}outmanapp_zhihu/">知乎热门话题抓取<i class="fa fa-chevron-right pull-right"></i></a></li>
                                                <li><a href="${SITE_URL}upload/">文件上传<i class="fa fa-chevron-right pull-right"></i></a></li>
                                                <li><a href="${SITE_URL}endecrypt/">加密小工具<i class="fa fa-chevron-right pull-right"></i></a></li>
                                                <li><a href="${SITE_URL}execute_task/">任务执行<i class="fa fa-chevron-right pull-right"></i></a></li>

                                            </ul>
                                        </li>
                                        <li class="has_submenu current open">
                                            <a href="javascript:void(0);"> <i class="fa fa-tasks ">                        </i>
                                                <span>表格</span>
                                                <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                                            </a>
                                            <ul class="sub-menu" style="display: none;">
                                                <li class="c-open"><a href="javascript:void(0);">表格一<i class="fa fa-chevron-right pull-right"></i></a></li>
                                                <li><a href="javascript:void(0);">表格二<i class="fa fa-chevron-right pull-right"></i></a></li>
                                            </ul>
                                        </li>
                                        <li class="has_submenu current open c-open">
                                            <a href="javascript:void(0);"> <i class="fa fa-ellipsis-h ">                        </i>
                                                <span>其他</span>
                                                <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li><a href="javascript:void(0);">空白<i class="fa fa-chevron-right pull-right"></i></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                    <div class="col-md-10">
                   <div class="king-block king-block-bordered king-block-themed mb0">
                            <div class="king-block-header king-default">
                                <ul class="king-block-options">
                                    <li>
                                        <!-- <button type="button"><i class="fa fa-cog"></i></button> -->
                                    </li>
                                </ul>
                                <h3 class="king-block-title">任务执行</h3>
                            </div>
                            <div class="king-block-content p0">

                            <!--<form class="form-vertical p15" action='${SITE_URL}execute_task/' method='post'> -->

                                  <div class="king-block-content p0">
                                                        <div class="form-group ">
                                                            <label>Num1：</label>
                                                            <input type="text" class="form-control" id="" name="param1" > </div>
                                  </div>
                                         <div class="king-block-content p0">
                                                        <div class="form-group ">
                                                            <label>Num2：</label>
                                                            <input type="text" class="form-control" id="" name="param2" > </div>
                                  </div>
                                    <div class="form-group" >
                                        <input type="submit" class="king-btn mr10  king-success" onclick="run(this)" value="提交"/>

                                    </div>
<div class="test_box" contenteditable="true"><br /></div>


                            </div>
                       ${string}

                        </div>


<div>
    <div id="bar_show_area" ></div>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
 <script>
     function run(_this) {
         var p1 = $("input[name='param1']:text").val();
         var p2 = $("input[name='param2']:text").val();
         $.ajax({
             url: '${SITE_URL}execute_task/?param1=' + p1 + "param2=" + p2,
             type: "post",
             success: function (res) {
                 if (res.result) {
                     task_id = res.data;

              $("#bar_show_area").append("<div class='task_div'>任务："+task_id+"<span id='"+task_id+"_span' style='float:right'></span><div id='"+task_id+"'></div><div>"); //进度条绑定区域
              // 创建进度条对象
              var nanobar = new Nanobar({target:document.getElementById(task_id)});
              update_g(task_id,nanobar);

                   //  $("#bar_show_area").append("<div class='progress-bar progress-bar-success' style='width: 100%'>" + "任务:" + res.data + "</div>");
                   //  var nanobar = new Nanobar({target:document.getElementById(task_id)});
                  //   update_g(task_id,nanobar)
                 }
                 else {
                     alert('failed')
                 }
             }
         });


        function update_g(task_id,nanobar) {
             $.ajax({
                 url:"${SITE_URL}task_result/?task_id=" + task_id,
                 type:"GET",
                 success: function (res) {
                     if (res['state'] == "success") {
                     alert('任务完成!')
                 }
                 else {
                    setTimeout(function(){
                    update_g(task_id,nanobar);
                  },1000);
                 }
                 }
             })
        }
     }

 </script>

</html>